<template>
    <el-card class="fu">
        <el-page-header :content="content" @back="$router.go(-1)" />
        <div style="margin: 20px;" />
        <section class="max-width-1200">
            <form-create
                v-model="form"
                v-model:api="fApi"
                :rule="rule"
                :option="options"
            />
        </section>
    </el-card>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessageBox, ElMessage } from 'element-plus'
import axios from 'axios'
import { useRoute, useRouter } from 'vue-router'

const form = ref({})
const fApi = ref({})

const route = useRoute()
const router = useRouter()

const query = route.query

const loadStage = (id, key) => {
    axios.post('/download/mon/stage', { id })
        .then(res => {
            let val =  rule.value.find(it => it.field === key)
            val.props.options = res.data.data.stage.map(it => ({ label: it.name, value: it.id }))
        })
}

loadStage(0, 'firstStageId')

const loadById = id => {
    axios.post('/download/information/detail', { id }).then(res => {
        form.value = res.data.data.detail

        // 加载3级联动
        loadStage(form.value.firstStageId, 'secondStageId')
        loadStage(form.value.secondStageId, 'thirdStageId')
    })
}
if (query.id) {
    loadById(query.id)
}

const content = computed(() => (query.id ? '编辑软件' : '新增软件'))

const rule = ref([
    {
        type: 'ElSelectV2',
        title: '第一级',
        field: 'firstStageId',
        col: {
            span: 8
        },
        props: {
            placeholder: '请选择',
            options: []
        },
        on: {
            change: val => {
                loadStage(val, 'secondStageId')
                form.value.secondStageId = ''
                form.value.thirdStageId = ''
            }
        }
    },
    {
        type: 'ElSelectV2',
        title: '第二级',
        col: {
            span: 8
        },
        field: 'secondStageId',
        props: {
            placeholder: '请选择',
            options: []
        },
        on: {
            change: val => {
                loadStage(val, 'thirdStageId')
                form.value.thirdStageId = ''
            }
        }
    },
    {
        type: 'ElSelectV2',
        title: '第三级',
        field: 'thirdStageId',
        col: {
            span: 8
        },
        props: {
            placeholder: '请选择',
            options: []
        }
    },
    {
        type: 'input',
        title: '标题',
        field: 'title',
        col: {
            span: 24
        },
        props: {
            clearable: true,
            placeholder: '请输入'
        }
    },
    {
        type: 'input',
        title: '子标题',
        field: 'titleOne',
        props: {
            clearable: true,
            placeholder: '请输入'
        }
    },
    {
        type: 'UploadIcon',
        title: '列表图',
        field: 'img',
        col: {
            span: 6
        },
        props: {
            clearable: true,
            placeholder: '请输入'
        }
    },
    {
        type: 'UploadIcon',
        title: '对外展示图',
        field: 'imgUrl',
        col: {
            span: 6
        },
        props: {
            clearable: true,
            placeholder: '请输入'
        }
    },
    {
        type: 'input',
        title: '视频链接',
        field: 'videoUrl',
        props: {
            clearable: true,
            placeholder: '请输入'
        }
    },
    {
        type: 'RichEditor',
        title: '内容',
        field: 'content',
        props: {
            clearable: true,
            placeholder: '请输入'
        }
    },
    {
        type: 'input',
        title: '内容简介',
        field: 'introduction',
        props: {
            clearable: true,
            placeholder: '请输入'
        }
    },
    {
        type: 'input',
        title: '作者',
        field: 'author',
        props: {
            clearable: true,
            placeholder: '请输入'
        }
    },
    {
        type: 'input',
        title: '来源',
        field: 'origin',
        props: {
            clearable: true,
            placeholder: '请输入'
        }
    },
    {
        type: 'input',
        title: '点赞量',
        field: 'likeNum',
        props: {
            clearable: true,
            placeholder: '请输入'
        }
    },
    {
        type: 'input',
        title: '阅读量',
        field: 'readNum',
        props: {
            clearable: true,
            placeholder: '请输入'
        }
    },
    {
        type: 'input',
        title: '评论量',
        field: 'commentNum',
        props: {
            clearable: true,
            placeholder: '请输入'
        }
    },
    {
        type: 'input',
        title: '分享量',
        field: 'shareNum',
        props: {
            clearable: true,
            placeholder: '请输入'
        }
    },
    {
        type: 'input',
        title: '权重',
        field: 'weight',
        props: {
            clearable: true,
            placeholder: '请输入'
        }
    },
    {
        type: 'ElSwitch',
        field: 'state',
        title: '是否生效',
        props: {
            'active-text': '生效',
            'inactive-text': '失效',
            'active-value': 0,
            'inactive-value': 1
        }
    }
])

const doSubmit = () => {
    ElMessageBox.confirm('确定保存该条数据?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    })
        .then(() => {
            axios
                .post('/download/information/saveAndEdit', {
                    ...form.value,
                    id: query.id || ''
                })
                .then(res => {
                    ElMessage({
                        type: 'success',
                        message: '保存成功!'
                    })
                    router.go(-1)
                })
        })
        .catch(error => {
            ElMessage({
                type: 'danger',
                message: '删除失败!' + error
            })
        })
}

const options = ref({
    submitBtn: true,
    resetBtn: true,
    form: {
        inline: false,
        labelPosition: 'right',
        size: 'mini',
        labelWidth: '90px',
        hideRequiredAsterisk: false,
        showMessage: true,
        inlineMessage: false
    },
    onSubmit: formData => {
        doSubmit(formData)
    }
})
</script>

<style scoped lang="scss">
.fu {
    display: flex;
    justify-content: center;
    width: 100vw;
}
</style>
